import { useAccess } from '@umijs/max';
import { PageContainer } from '@ant-design/pro-components';
import { Card, Row, Col, Statistic, Button } from 'antd';
import { ShoppingOutlined, OrderedListOutlined, UserOutlined } from '@ant-design/icons';
import { useModel, history } from '@umijs/max';
import styles from './index.less';

const HomePage: React.FC = () => {
  const { initialState } = useModel('@@initialState');
  const { currentUser } = initialState || {};
  const access = useAccess();

  // 跳转到商品列表
  const goToProducts = () => {
    history.push('/products/list');
  };

  // 跳转到订单列表
  const goToOrders = () => {
    history.push('/orders/list');
  };

  return (
    <PageContainer
      ghost
      header={{
        title: '商城后台管理系统',
        subTitle: '欢迎使用商城后台管理系统',
      }}
    >
      <div className={styles.container}>
        <Card style={{ marginBottom: 24 }}>
          <Row gutter={24}>
            <Col span={8}>
              <Card bordered={false}>
                <Statistic
                  title="商品总数"
                  value={1024}
                  prefix={<ShoppingOutlined />}
                  suffix="个"
                />
              </Card>
            </Col>
            <Col span={8}>
              <Card bordered={false}>
                <Statistic
                  title="订单总数"
                  value={256}
                  prefix={<OrderedListOutlined />}
                  suffix="个"
                />
              </Card>
            </Col>
            <Col span={8}>
              <Card bordered={false}>
                <Statistic
                  title="用户总数"
                  value={512}
                  prefix={<UserOutlined />}
                  suffix="人"
                />
              </Card>
            </Col>
          </Row>
        </Card>

        <Row gutter={24}>
          {access.canAccessProducts && (
            <Col span={12}>
              <Card
                title="商品管理"
                extra={<Button type="primary" onClick={goToProducts}>查看更多</Button>}
              >
                <p>管理商品信息，包括商品上架、下架、编辑等操作。</p>
                <p>当前共有1024个商品，其中活跃商品900个。</p>
              </Card>
            </Col>
          )}
          
          {access.canAccessOrders && (
            <Col span={12}>
              <Card
                title="订单管理"
                extra={<Button type="primary" onClick={goToOrders}>查看更多</Button>}
              >
                <p>管理订单信息，包括订单处理、发货、完成等操作。</p>
                <p>当前共有256个订单，其中待处理订单30个。</p>
              </Card>
            </Col>
          )}
        </Row>

        <Card style={{ marginTop: 24 }}>
          <div style={{ padding: '20px 0' }}>
            <h3>欢迎，{currentUser?.name || '管理员'}！</h3>
            <p>您当前的角色是：{currentUser?.role === 'super_admin' ? '超级管理员' : 
                              currentUser?.role === 'product_admin' ? '商品管理员' : 
                              currentUser?.role === 'order_admin' ? '订单管理员' : '普通用户'}</p>
            <p>上次登录时间：{new Date().toLocaleString()}</p>
          </div>
        </Card>
      </div>
    </PageContainer>
  );
};

export default HomePage;